<template>
	<view class="messageDetail color0">
		<cl-navbar :title="contentData.title" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		
		<view class="color0 px-3">
			<view class="title font40 font-weight-500">
				{{contentData.title}}
			</view>
			<view class="name font28 font-weight-normal mt-2 mb-4">
				<text class="mr-3">{{contentData.user_info && contentData.user_info.nick_name || '-'}}</text>
				<text v-if="contentData.create_time">{{$u.timeFormat(contentData.create_time, 'yyyy-mm-dd hh:MM')}}</text>
			</view>
			<view class="content">
				<mp-html :content="contentData.content" />
			</view>
		</view>
		<!-- <view class="bottom flex position-fixed bottom-0 left-0 right-0">
			<view class="left flex justify-between align-center font28 font-weight-normal">
				<view class="item flex flex-column justify-center align-center">
					<image class="image mb-1" src="/static/message/like.png" mode=""></image>
					<text>{{$t('message.index.like')}}</text>
				</view>
				<view class="item flex flex-column justify-center align-center">
					<image class="image mb-1" src="/static/message/collect.png" mode=""></image>
					<text>{{$t('message.index.collect')}}</text>
				</view>
			</view>
			<view class="right colorF flex justify-start align-center">
				<u-button class="custom-style" color="" :text="$t('message.index.more')"></u-button>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarHeight: uni.getSystemInfoSync().statusBarHeight,
				contentData: {},
				id: '',
			};
		},
		onLoad() {
			let {
				id
			} = this.$Route.query
			this.id = id
			this.getDetail()
		},
		methods: {
			async getDetail() {
				try {
					let apires = await this.$api.message.newsInfo({
						news_id: this.id
					})
					if (apires && apires.code == 200) {
						this.contentData = apires.data
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.messageDetail {
		background-color: #ededed;
		min-height: 100vh;

		.name {
			color: rgba(0, 0, 0, 0.3);
		}

		.content {
			// height: 600px;
			padding-bottom: 90rpx;
		}

		.bottom {
			background-color: #fff;
			height: 90rpx;

			.left {
				width: calc(100% - 310rpx);

				.item {
					width: 50%;
				}

				.image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.right {
				width: 310rpx;

				.custom-style {
					margin: 0;
					width: 260rpx;
					height: 76rpx;
					border-radius: 44rpx;
					color: #fff;
					background-image: linear-gradient(270deg, #FF7B3C 0%, #FF5B7C 100%)
				}
			}
		}
	}
</style>